<template>
	<view style="height: 2578rpx;">
		<view style="position:relative;">
			<image src="../../../static/cliend/Application.png" mode="Application"
				style="height:426rpx;width: 100vh;z-index: -1;"></image>
			<image src="../../../static/cliend/@2x.png" mode=""
				style="position: absolute;top:120rpx;left:30rpx;width: 40rpx;height:40rpx;" @tap="goback"></image>
		</view>
		<view style="background-color: #ffffff;padding: 30rpx;">
			<view class="flex align-center">
				<image src="../../../static/cliend/foundation.png" style="width: 72rpx;height: 72rpx;"
					mode="foundation"></image>
				<h3 style="margin-left: 26rpx;font-size: 36rpx;font-weight: 500;">基础信息</h3>
			</view>
			<view class="title_a">
				身份选择
			</view>
			<view style="display: flex;justify-content: space-between;margin: 15rpx 0;">
				<view class="identityTable" v-for="(item,index) in identityType" :key="index"
					:class="identityIndex==index ? 'identityStyle' :''" @click="identityChild(index,item.id)">
					{{item.name}}
				</view>
			</view>
			<!-- 设计师、安装师傅 -->
			<view v-if="individual">
				<view class="title_a">
					姓名
				</view>
				<input @click="selectedName=true" @blur="selectedName=false"
					:class=" selectedName==true ? 'selected' : 'input' " type="text" class="input"
					v-model="information.name" placeholder="请输入您的姓名">
				<view class="title_a">
					性别
				</view>
				<view style="display: flex;justify-content: space-between;margin: 15rpx 0;">
					<view class="genderTable flex align-center justify-center" v-for="(item,index) in genderType"
						:key="index" :class="genderIndex==index ? 'genderStyle' :''"
						@click="genderChild(index,item.id)">
						<!-- 男生 -->
						<image v-if="item.id==1 && genderIndex==0"
							style="vertical-align: middle;width: 64rpx;height: 64rpx;"
							src="../../../static/cliend/boy.png" mode=""></image>
						<image v-if="item.id==1 && genderIndex==1"
							style="vertical-align: middle;width: 64rpx;height: 64rpx;"
							src="../../../static/cliend/boy_.png" mode=""></image>
						<!-- 女生 -->
						<image v-if="item.id==2 && genderIndex==1" style="width: 64rpx;height: 64rpx;margin: auto 0;"
							src="../../../static/cliend/girl.png" mode=""></image>
						<image v-if="item.id==2 && genderIndex==0" style="width: 64rpx;height: 64rpx;margin: auto 0;"
							src="../../../static/cliend/girl_.png" mode=""></image>
						<view>
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 工厂 -->
			<view v-if="factory">
				<view class="title_a">
					工厂名字
				</view>
				<input @click="selectedsName=true" @blur="selectedsName=false"
					:class=" selectedsName==true ? 'selected' : 'input' " type="text" v-model="information.name"
					class="input" placeholder="请输入您的工厂名字">
				<view class="title_a">
					工厂地址
				</view>
				<input @click="selectedAddress=true" @blur="selectedAddress=false"
					:class=" selectedAddress==true ? 'selected' : 'input' " type="text"
					v-model="information.factoryAddress" class="input" placeholder="请输入您的工厂地址">
			</view>
			<view class="title_a">
				联系方式
			</view>
			<input @click="selectedPhone=true" @blur="selectedPhone=false"
				:class=" selectedPhone==true ? 'selected' : 'input' " type="text" class="input" maxlength="11"
				v-model="information.phone" placeholder="请输入您的联系方式">
		</view>
		<view style="background-color: #ffffff;padding: 30rpx;margin-top: 30rpx;">
			<!-- 设计师、安装师傅 -->
			<view v-if="individual">
				<view class="flex align-center">
					<image src="../../../static/cliend/upload.png" style="width: 72rpx;height: 72rpx;" mode="upload">
					</image>
					<h3 style="margin-left: 26rpx;font-size: 36rpx;font-weight: 500;">上传资料</h3>
				</view>
				<view class="title_a">
					证件类型
				</view>
				<select-lay class="seclectpaytype" :value="paytype.toString()" slabel="type" svalue="typeid"
					placeholder="请选择您的证件类型" :options="paymode" @selectitem="selectitem"></select-lay>
				<view class="title_a">
					证件号码
				</view>
				<input @click="selected=true" @blur="selected=false" :class=" selected==true ? 'selected' : 'input' "
					class="uni-input input" maxlength="18" v-model="information.ID" type="idcard"
					placeholder="请输入您的证件号码" />
			</view>
			<view v-if="individual">
				<view class="title_a">
					证件照片
				</view>
				<h4>1.身份证照片不得有遮挡，保证字迹清晰</h4>
				<h4>2.请在白色背景下拍摄，保证身份证边缘清晰</h4>
				<h4>3.请从证件的正上方拍摄，防止画面变形</h4>
				<view class="flex">
					<view style="margin: 35rpx 0;">
						<view v-if="humanFace.length < 1">
							<image src="/clientEnd/static/7578.png" mode="aspectFit"
								style="width:208rpx;height: 144rpx;" @tap="chooseAvatar(1)"></image>
						</view>
						<view class="flex align-center" style="width:100%;">
							<view v-for="(item,index) in humanFace" :key="index" style="position: relative;">
								<image :src="item" mode="scaleToFill"
									style="width: 208rpx;height:144rpx;border-radius: 8rpx;" @tap="images(item)">
								</image>
								<image src="../../static/install/8011.png" mode="aspectFit"
									style="width:90rpx;height:90rpx;position: absolute;bottom:10rpx;right: 10rpx;"
									@tap="datape(index,1)"></image>
							</view>
						</view>
						<view style="text-align: center;">
							人像面
						</view>
					</view>
					<view style="margin: 35rpx;">
						<view v-if="nationalEmblem.length < 1">
							<image src="/clientEnd/static/7578.png" mode="aspectFit"
								style="width:208rpx;height: 144rpx;" @tap="chooseAvatar(2)"></image>
						</view>
						<view class="flex align-center" style="width:100%;">
							<view v-for="(item,index) in nationalEmblem" :key="index" style="position: relative;">
								<image :src="item" mode="scaleToFill"
									style="width: 208rpx;height:144rpx;border-radius: 8rpx;" @tap="images(item)">
								</image>
								<image src="../../static/install/8011.png" mode="aspectFit"
									style="width:90rpx;height:90rpx;position: absolute;bottom:10rpx;right: 10rpx;"
									@tap="datape(index,2)"></image>
							</view>
						</view>
						<view style="text-align: center;">
							国徽面
						</view>
					</view>
				</view>
			</view>
			<view v-if="factory">
				<view class="title_a">
					营业执照
				</view>
				<h4>1.身份证照片不得有遮挡，保证字迹清晰</h4>
				<h4>2.请在白色背景下拍摄，保证身份证边缘清晰</h4>
				<h4>3.请从证件的正上方拍摄，防止画面变形</h4>
				<view style="margin: 35rpx 0;">
					<view v-if="ImageData.length < 2">
						<image src="/clientEnd/static/7578.png" mode="aspectFit" style="width:208rpx;height: 144rpx;"
							@tap="chooseAvatar(3)"></image>
					</view>
					<view class="flex align-center" style="width:100%;">
						<view v-for="(item,index) in ImageData" :key="index" style="position: relative;">
							<image :src="item" mode="scaleToFill"
								style="width: 208rpx;height:144rpx;border-radius: 8rpx;margin:15rpx 15rpx 15rpx 0"
								@tap="images(item)">
							</image>
							<image src="../../static/install/8011.png" mode="aspectFit"
								style="width:90rpx;height:90rpx;position: absolute;bottom:10rpx;right: 10rpx;"
								@tap="datape(index,3)"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 作品 -->
			<view>
				<view class="title_a">
					优秀作品
				</view>
				<view class="flex align-center justify-between" style="margin: 35rpx 0;">
					<image src="/clientEnd/static/7578.png" mode="aspectFit" style="width:208rpx;height: 144rpx;"
						@tap="chooseAvatar"></image>
					<view style="color: rgba(30,30,30,0.6);font-size: 28rpx;width: 340rpx;">注：上传的图片不得大于5M，格式为.jpg .png
					</view>
				</view>
				<view style="margin: 30rpx 0;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
						<view class="flex align-center justify-between" style="width:100%;">
							<view v-for="(item,index) in productionData" :key="index" style="position: relative;">
								<image :src="item" mode="scaleToFill"
									style="width: 198rpx;height: 134rpx;border-radius: 8rpx;margin:15rpx 0;"
									@tap="images(item)">
								</image>
								<image src="../../static/install/8011.png" mode="aspectFit"
									style="width:90rpx;height:90rpx;position: absolute;bottom:20rpx;right: 10rpx;"
									@tap="datape(index)"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="width: 690rpx;height: 1rpx;background: rgba(30,30,30,0.2);margin:20rpx auto ;"></view>
				<textarea style="margin: 30rpx;" type="date" name="" id="" v-model="information.content"
					placeholder="请输入内容"></textarea>
			</view>
		</view>
		<!-- 提交申请 -->
		<view v-if="status">
			<view class="uploads">
				<view class="upload" style="background: rgba(73,45,34,0.31);">已提交(等待审核)</view>
			</view>
		</view>
		<view class="uploads" @tap.stop="submit" v-if="!status">
			<view class="upload">提交申请</view>
		</view>
	</view>
</template>

<script>
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';
	import baseurl from '@/common/config.js'
	export default {
		data() {
			return {
				selectedName: false,
				selectedPhone: false,
				selectedAddress: false,
				selectedsName: false,
				selected: false,
				id: '',
				identityType: [{
						name: '设计师',
						id: '1'
					},
					{
						name: '工厂',
						id: '2'
					}, {
						name: '安装师傅',
						id: '3'
					},
				],
				identityIndex: 0,
				genderType: [{
						name: '男',
						id: '1'
					},
					{
						name: '女',
						id: '2'
					}
				],
				genderIndex: 0,
				paymode: [{
					type: '中国大陆居民身份证',
					typeid: 1
				}],
				paytype: '',
				ImageData: [],
				productionData:[],
				// 人面
				humanFace: [],
				// 国徽
				nationalEmblem: [],
				urlIndex: '',
				// 个人信息
				information: {
					userType: 1,
					name: '',
					gender: 1,
					factoryAddress: '',
					phone: '',
					typeOfIDCard: '',
					ID: '',
					nationalEmblem: '',
					portrait: '',
					businessLicense: '',
					status: 0,
					content: '',
					production:''
				},
				factory: false,
				individual: true,
				status: false,
			}
		},
		onLoad(e) {
			if (e.type == 4) {
				this.identityIndex = 1
				this.information.userType = 2
			} else if (e.type == 3) {
				this.identityIndex = 2
				this.information.userType = 3
			} else if (e.type == 2) {
				this.identityIndex = 0
				this.information.userType = 1
			}
			this.urlIndex = baseurl
			this.submitIn()
		},
		onShow() {},
		methods: {
			submitIn() {
				this.$api.applications().then((res) => {
					// this.information.userType = res.data.result.status.userType
					// this.information.name = res.data.result.status.shopsName
					// this.information.address = res.data.result.status.address
					// this.information.phone = res.data.result.status.phone
					// this.information.businessLicense = res.data.result.status.businessLicense
					let type = {
						1: '设计师',
						2: '工厂',
						3: '安装师傅'
					}
					if (res.data.result.type != 4) {
						uni.showModal({
							title: '提示',
							content: '您已经是' + type[res.data.result.type],
							success: function(res) {
								uni.reLaunch({
									url: '/pages/tabbar/clientEndTabbar/person'
								})
							},

						});
					} else {
						this.status = false
					}
					console.log(res, '达瓦达瓦')
					if (res.data.result.status.status == 0) {
						this.$tools.showToast('您已成功提交申请，我们会在2个工作日内处理您的申请。')
						this.status = true
					}
				})
			},
			// 提交申请
			submit() {
				if (this.information.userType == 2) {
					this.information.gender = ''
				}
				this.$api.applications(this.information).then((res) => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: `提交成功`,
							icon: "block",
						})
						uni.reLaunch({
							url: '/pages/tabbar/clientEndTabbar/ClientHome'
						})
						this.status = true
					}
				})
			},
			uploadFile(file, type, index) {
				uni.uploadFile({
					url: baseurl + '/universal/uploadCloudMore',
					filePath: file,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					formData: {
						'type': type
					},
					success: (res) => {						 
						if (this.information.userType == 2 || index == 3) {
							this.ImageData.push('http://' + JSON.parse(res.data).result)
							this.information.businessLicense = this.ImageData
						} else {
							if (index == 2) {
								this.nationalEmblem.push('http://' + JSON.parse(res.data).result)
								this.information.nationalEmblem = this.nationalEmblem
							} else if (index == 1) {
								this.humanFace.push('http://' + JSON.parse(res.data).result)
								this.information.portrait = this.humanFace
							}else{
								this.productionData.push('http://' + JSON.parse(res.data).result)
								this.information.production = this.productionData
							}
						}
					}
				});
			},
			async chooseAvatar(index) {
				if (this.ImageData.length == 2) {
					uni.showLoading({
						title: '最多只能上传2张'
					})
					return uni.hideLoading();
				}
				let file = await this.$tools.chooseImg(3, 1, 1)
				if (file) {
					uni.showLoading({
						title: '上传中...'
					})
					file.forEach((item) => {
						this.uploadFile(item.path, 2, index)
					})
					this.$forceUpdate();
					uni.hideLoading()
					// this.$forceUpdate();
				}
			},
			images(e) {
				let arr = [e]
				uni.previewImage({
					urls: arr
				});
			},
			datape(e, type) {
				if (type == 1) {
					this.humanFace.splice(e, 1)
				} else if (type == 2) {
					this.nationalEmblem.splice(e, 1)
				} else if (type == 3) {
					this.ImageData.splice(e, 1)
				}
				this.productionData.splice(e, 1)
				this.$forceUpdate();
			},
			// 身份证类型
			selectitem(index, item) {
				this.payChannelid = item.typeid;
				if (index == 0) {
					this.paytype = this.paymode[index].typeid;
					this.information.typeOfIDCard = this.paymode[index].type;
				}
			},
			// 性别
			genderChild(e, id) {
				this.genderIndex = e
				this.information.gender = id
			},
			// 身份
			identityChild(e, id) {
				this.identityIndex = e
				this.information.userType = id
				if (this.identityIndex == 1) {
					this.factory = true
					this.individual = false
				} else {
					this.factory = false
					this.individual = true
				}
				this.information.name = ""
				this.information.factoryAddress = ""
				this.information.gender = 1
				this.information.phone = ""
				this.information.typeOfIDCard = ""
				this.information.ID = ""
				this.information.nationalEmblem = ""
				this.information.portrait = ""
				this.information.businessLicense = ""
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.upload {
		width: 554rpx;
		height: 86rpx;
		background: #492D22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 36rpx;
		margin: auto;
	}

	.uploads {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		z-index: 999;
	}

	.prompt {
		width: 690rpx;
		height: 98rpx;
		color: #fFFFFF;
		background: rgba(30, 30, 30, 0.8);
		border-radius: 50rpx;
		position: fixed;
		bottom: 150rpx;
		padding: 10rpx 30rpx;
		margin: 30rpx;
		z-index: 999;
	}

	h4 {
		font-size: 28rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: rgba(30, 30, 30, 0.6);
		line-height: 36rpx;
	}

	.input {
		width: 690rpx;
		height: 112rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(73, 45, 34, 0.1);
		padding: 20rpx;
	}

	.selected {
		border: 5rpx solid #492D22;
	}

	.title_a {
		margin: 30rpx 0 10rpx;
		font-size: 32rpx;
	}

	.genderTable {
		width: 332rpx;
		height: 88rpx;
		/* line-height: 88rpx; */
		vertical-align: middle;
		font-size: 32rpx;
		text-align: center;
		color: rgba(30, 30, 30, 0.3);
		border-radius: 20rpx;
		border: 2rpx solid rgba(30, 30, 30, 0.18);
	}

	.genderStyle {
		background: #492D22;
		color: #fFFFFF !important;
	}

	.identityTable {
		width: 220rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		text-align: center;
		color: rgba(30, 30, 30, 0.3);
		border-radius: 20rpx;
		border: 2rpx solid rgba(30, 30, 30, 0.18);
	}

	.identityStyle {
		background: #492D22;
		color: #fFFFFF !important;
	}
</style>
